<template>
  <div class="font-div">
    <a-radio-group v-model="fontSize" button-style="solid" @change="fontSizeChange">
      <a-radio-button :value="14"> 标准 </a-radio-button>
      <a-radio-button :value="16"> 加大 </a-radio-button>
      <a-radio-button :value="18"> 特大 </a-radio-button>
    </a-radio-group>
  </div>
</template>

<script>
import storage from 'store'
import { FONT_SIZE } from '@/store/mutation-types'
export default {
  data () {
    return {
      fontSize: 14 // 字号大小
    }
  },
  created () {
    if (storage.get(FONT_SIZE)) {
      this.fontSize = storage.get(FONT_SIZE)
    }
    document.documentElement.style.fontSize = this.fontSize + 'px'
  },
  methods: {
    fontSizeChange () {
      document.documentElement.style.fontSize = this.fontSize + 'px'
      storage.set(FONT_SIZE, this.fontSize)
    }
  }
}
</script>
<style lang="css" scoped>
.font-div {
  font-size: 1rem;
}
</style>
